<template>
  <div class="poster-content">
    <div class="item-block">
      <div class="clander item-block">
        <el-form ref="ruleForm" :model="ruleForm" :inline="true">
          <el-form-item label="活动标题" prop="tourName">
            <el-input v-model="ruleForm.tourName" />
          </el-form-item>
          <el-form-item label="选择时间" prop="dataValue">
            <el-date-picker
              v-model="ruleForm.dataValue"
              style="width:380px"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            />
          </el-form-item>
          <el-form-item style="margin-bottom:0">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="tab-list mt15">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        :border="true"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          min-width="10%"
        />
        <el-table-column
          prop="posterName"
          label="标题"
          align="center"
          min-width="20%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          align="center"
          prop="posterLink"
          label="链接"
          min-width="20%"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          align="center"
          prop="posterUrl"
          label="文件"
          min-width="20%"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <a target="_blank" :href="scope.row.posterUrl">{{ scope.row.fileName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updateTime"
          label="创建时间"
          min-width="20%"
        />
        <el-table-column
          align="center"
          label="操作"
          min-width="35%"
        >
          <template slot-scope="scope">
            <el-button key="3" type="primary" size="small" plain icon="el-icon-user" @click="detail(scope.row.id)">查看</el-button>
            <el-button key="2" type="success" plain icon="el-icon-edit" size="small" @click="eidtOpen(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" plain icon="el-icon-delete" @click="openDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pagesize" @pagination="getList" />
    <el-dialog :title="editId === 'add'?'添加':(editId === 'edit'?'编辑':'详情')" :class="[ editId === ''? 'detail':'']" destroy-on-close :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="formRule">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="posterName">
          <el-input v-model="form.posterName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth" prop="posterLink">
          <el-input v-model="form.posterLink" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth" prop="posterUrl">
          <el-upload
            :headers="header"
            :action="upload_url"
            :show-file-list="false"
            class="upload-demo"
            :disabled="editId ===''"
            drag
            :before-upload="beforeAvatarUpload"
            accept="image/*"
            :on-success="success"
          >
            <img v-if="form.posterUrl" width="100%" height="100%" :src="form.posterUrl" class="avatar">
            <i v-if="!form.posterUrl" class="el-icon-upload" />
            <div v-if="!form.posterUrl" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div v-if="form.posterUrl" slot="tip" class="el-upload__tip">尺寸建议1920*400，且不超过3M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div v-if="editId !=='' " slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getList } from '@/api/table'
import Pagination from '@/components/pagination.vue'
export default {
  name:'Payboard',
  components: {
    Pagination
  },
  data() {
    return {
      ruleForm: {
        dataValue: '',
        tourName: ''
      },
      id: '',
      dialogVisible: false,
      header: { 'Authorization': 'Bearer ' + getToken() },
      upload_url:'',
      editId: '',
      tableData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pagesize: 10
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        posterName: '',
        posterLink: '',
        posterUrl: '',
        fileName: '',
        id: ''
      },
      formLabelWidth: '120px',
      formRule: {
        posterName: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        posterLink: [
          { required: true, message: '请输入链接', trigger: 'blur' },
          { pattern: /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i, message: '格式错误', trigger: 'blur' }
        ],
        file: [{
          required: true, message: '请选择图片', trigger: 'change'
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    success(data) {
      if (data.code === 200 && data.data) {
        this.form.posterUrl = data.data.src
        this.form.fileName = data.data.fileName
        this.$message.success(data.msg)
      } else {
        this.$message.error(data.msg)
      }
    },
    beforeAvatarUpload(file) {
      // const testImg = /^image\/(png|jpg)$/.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 3
      // if (!testImg) {
      //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isLt2M
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          (this.form.id ? posterUpdate : posterAdd)(this.form).then(res => {
            this.$message.success(this.form.id ? '编辑成功' : '添加成功')
            this.dialogFormVisible = false
            this.getList()
          })
        } else {
          return false
        }
      })
    },
    addOpen() {
      this.dialogFormVisible = true
      this.editId = 'add'
      this.form = {
        posterName: '',
        posterLink: '',
        posterUrl: '',
        fileName: '',
        id: ''
      }
    },
    eidtOpen(id) {
      this.dialogFormVisible = true
      this.detail(id)
      this.editId = 'adit'
    },
    detail(id) {
      this.dialogFormVisible = true
      this.editId = ''
      // showUpd({ 'id': id }).then(res => {
      //   this.form = res.data
      //   delete this.form.updateTime
      // })
    },
    openDel(id) {
      this.id = id
      this.dialogVisible = true
    },
    del() {
      // posterDel({ 'id': this.id }).then(res => {
      //   this.$message.success('删除成功')
      //   this.dialogVisible = 0
      //   this.listQuery = { page: 1, pagesize: 10 }
      //   this.getList()
      // })
    },
    getList() {
      this.listLoading = true
      setTimeout(() => {
        this.listLoading = false
      }, 2000)
      // posterList(this.listQuery).then(res => {
      //   this.listLoading = false
      //   this.tableData = res.data
      //   this.total = res.total
      // })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.listQuery = { page: 1, pagesize: 10 }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.listQuery = { page: 1, pagesize: 10 }
      //this.getList(Object.assign({}, this.listQuery, this.ruleForm))
    },
  }
}
</script>

<style lang="scss">
.detail {
  .el-input__inner {
    border:none
  }
}
</style>
